<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>用户列表</title>
    <div th:replace="config :: copy"></div>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户列表 </legend>
</fieldset>

<div class="layui-form">
    <!--lay-size="sm" 调整表格大小-->
    <table class="layui-table" lay-filter="userTable" >
        <colgroup>
            <col width="150"/>
            <col width="150"/>
            <col width="200"/>
            <col/>
        </colgroup>
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>密码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user,userStat:${userList}">
            <td id="indexUser" th:text="(${indexPage}-1)*${pageSize}+${userStat.count}"></td>
            <td th:text="${user.userName}"></td>
            <td th:text="${user.password}"></td>
            <td>
                <div class="layui-btn-container">
                    <button class="layui-btn layui-anim layui-anim-scaleSpring layui-btn-sm" ><i class="layui-icon">&#xe60a;</i>详细</button>
                    <button class="layui-btn layui-anim layui-anim-scaleSpring layui-btn-sm" id="editUser"  th:onclick="'javascript:editUser(\''+${user.id}+'\')'" ><i class="layui-icon">&#xe642;</i>编辑</button>
                    <button class="layui-btn layui-anim layui-anim-scaleSpring layui-btn-sm" th:onclick="'javascript:deleteUser(\''+${user.id}+'\',\''+${user.userName}+'\')'"><i class="layui-icon">&#xe640;</i>删除</button>
                </div>
            </td>
        </tr>

        </tbody>
    </table>
    <input type="hidden" id="pageTotal" th:value="${userTotle}"/>
    <input type="hidden" id="indexPage" th:value="${indexPage}"/>
    <input type="hidden" id="pageSize" th:value="${pageSize}"/>
    <div id="pagePlug"></div>
</div>

<script>
    //编辑
    function editUser(id){
            parent.layer.open({
            type: 2,
            title: '用户管理',
            area: ['700px', '450px'],
            fixed: false, //不固定
            maxmin: true,
            content: 'edit?flag=edit&amp;id='+id
        })
    }

    function deleteUser(id,name){
        parent.layer.confirm('确定将姓名【'+name+'】删除?', {
            btn: ['确定','取消'] //可以无限个按钮
            }, function(){
                $.ajax({
                    type:"GET",
                    url:"deleteUser?id="+id,
                    success:function(data){
                        console.log('data-->'+data);
                        if(data=='ok'){
                            parent.$("#userSubmit").submit();
                            //关闭
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            parent.layer.msg("删除成功")
                        }else{
                            parent.$("#userSubmit").submit();
                            //关闭
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            parent.layer.msg("删除失败")
                        }
                    }

                })
            }, function(){
                //关闭
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            }
        );
    }

    layui.use(['layer','element','laypage'], function(){
        var layer=layui.layer;
        var element = layui.element;
        var laypage = layui.laypage;


       var userTotle= $('#pageTotal').val();//总页，当前页
       var indexPage= $("#indexPage").val();
       var pageSize=  $("#pageSize").val();
        //完整功能
            laypage.render({
                elem: 'pagePlug'
                ,count: userTotle
                ,curr: indexPage //获取当前页
                ,limit: pageSize //当前总页数
                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                ,jump: function(obj,first){
                    //首次不执行
                    if(!first){
                        console.log(obj);
                        console.log(location.hash.replace('#!fenye=', ''));
                        var curIndex=obj.curr;
                        var pageSize=obj.limit;
                        parent.$("#indexPage").val(curIndex);
                        parent.$("#pageSize").val(pageSize);
                        parent.$("#userSubmit").submit();
                        parent.$("#indexPage").val('');
                        parent.$("#pageSize").val('');
                    }


                }
            });
    })


</script>
</body>
</html>